<template>
    <div class="main">
        <div class="set-version-list">
            <div v-if="rightsButtons['add']" class="filter-container">
                <el-button type="success" icon="el-icon-plus" class="filter-item" @click="showAdd">新建</el-button>
            </div>
            <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="版本号" prop="appVersion" width="100"></el-table-column>
                <el-table-column align="center" label="APP类型" width="100">
                    <template slot-scope="scope">
                      {{AppTypeList[scope.row.appType]}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="下载二维码" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.qrCodeImageUrl" alt="" width="60"/>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="下载地址" prop="appDownloadUrl" min-width="220"></el-table-column>
                <el-table-column align="center" label="版本描述" prop="versionDesc"	>
                    <template slot-scope="scope">
                        <el-tooltip content="Top center" effect="light">
                            <div slot="content">
                                <pre style="text-align: left">{{scope.row.versionDesc}}</pre>
                            </div>
                            <el-button type="text" size="mini">查看详情</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="强制版本更新" width="120">
                    <template slot-scope="scope">
                        {{scope.row.forceUpdateFlag?'是':'否'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="历史版本" width="80">
                    <template slot-scope="scope">
                        {{scope.row.historyVersionFlag?'是':'否'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间" width="200">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="100" v-if="rightsButtons['edit']">
                    <template slot-scope="scope">
                        <el-button :disabled="!!scope.row.historyVersionFlag" type="primary" size="mini" plain @click="showEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
            <el-dialog :title="formData.id ? '编辑版本' : '新建版本'" :visible.sync="formVisible">
                <el-form :model="formData" :rules="formRules" size="medium" ref="form" label-width="120px">
                    <el-form-item label="版本号:" prop="appVersion">
                        <el-input v-model="formData.appVersion" maxLength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="APP类型:" prop="appType">
                      <template v-for="(item, index) in AppTypeList">
                        <el-radio v-if="item" :key="index" v-model="formData.appType" :label="index">{{item}}</el-radio>
                      </template>
                    </el-form-item>
                    <el-form-item label="下载地址:" prop="appDownloadUrl">
                        <el-input v-model="formData.appDownloadUrl" maxLength="200"></el-input>
                    </el-form-item>
                    <el-form-item label="下载二维码:" prop="qrCodeImageUrl">
                        <el-upload
                                class="avatar-uploader"
                                accept="image/*"
                                :action="upladUrl"
                                name="file"
                                :show-file-list="false"
                                :on-success="uploadSuccess"
                                :before-upload="beforeUpload">
                            <img v-if="formData.qrCodeImageUrl" :src="formData.qrCodeImageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="版本描述:" prop="versionDesc">
                        <el-input type="textarea" :rows="8" v-model="formData.versionDesc" maxLength="1000"></el-input>
                        <!--<tinymce :height="360" v-model="formData.versionDesc"></tinymce>-->
                    </el-form-item>
                    <el-form-item label="强制版本更新:" prop="forceUpdateFlag">
                        <el-switch
                                v-model="formData.forceUpdateFlag"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :disabled="formBtnLoading">保存</el-button>
                    <el-button @click="formVisible = false">取消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
  import Tinymce from '@/components/Tinymce'
  export default {
    name: 'setVersion',
    components: {
      Tinymce
    },
    data(){
      return{
        AppTypeList: ['', 'iOS', 'Android', 'live_iOS', 'live_Android', 'new_bx_iOS'],
        listQuery: {
          isPage: 1,
          pageIndex: 1,
          pageSize: 10
        },
        listLoading: false,
        list: [],
        listTotal: 0,

        formData: {
          appVersion: '',
          appType: 1,
          appDownloadUrl: '',
          qrCodeImageUrl: '',
          versionDesc: '',
          forceUpdateFlag: ''
        },
        formRules: {
          appVersion: [{required: true, message: '不能为空', trigger: 'change'}],
          appDownloadUrl: [
            {required: true, message: '不能为空', trigger: 'change'},
            {type: 'url', message: 'url格式错误', trigger: 'change'}
          ],
          qrCodeImageUrl: [
            {required: true, message: '不能为空', trigger: 'change'}
          ],
          versionDesc: [
            {required: true, message: '不能为空', trigger: 'change'}
          ]
        },
        formVisible: false,
        formBtnLoading: false,
      }
    },
    created(){
      this.getList();
    },
    methods: {
      getList(){
        this.listLoading = true;
        this.request({
          url: '/bsnl-product/versionInfo/list',
          method: 'get',
          params: this.listQuery
        }).then(({data, totalCount}) => {
          this.list = data;
          this.listTotal = totalCount;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      // 切换分页
      handleCurrentChange(page) {
        this.listQuery.pageIndex = page;
        this.getList();
      },
      // 切换分页数
      handleSizeChange(pageSize) {
        this.listQuery.pageSize = pageSize;
        this.getList();
      },
      showAdd(){
        this.formData = {
          appVersion: '',
          appType: 1,
          appDownloadUrl: '',
          qrCodeImageUrl: '',
          versionDesc: '',
          forceUpdateFlag: ''
        };
        this.formVisible = true;
      },
      showEdit(row){
        this.formData = Object.assign({}, row);
        this.formVisible = true;
      },
      uploadSuccess(res) {
        this.formData.qrCodeImageUrl = this.replaceImgUrl(res.filePath);
      },
      save() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false;
          }
          let url = this.formData.id ? '/bsnl-product/versionInfo/update' : '/bsnl-product/versionInfo/create';
          this.formBtnLoading = true;
          this.request({
            url,
            method: 'post',
            data: this.formData
          }).then(() => {
            this.formBtnLoading = false;
            this.formVisible = false;
            this.$message.success('保存成功');
            this.getList();
          }).catch(err => {
            this.formBtnLoading = false;
          });
        });
      },
    }
  }
</script>
<style lang="scss">
    .set-version-list{
        .el-pagination{
            margin-top: 12px;
        }
        .el-dialog{
            width: 90%;
            max-width: 800px;
        }
    }
</style>
